@import "variable";
@import "reset";
@import "components/chat";

.el-dialog__wrapper {
  .el-dialog {
    .el-dialog__header {
      position: relative;
      .el-dialog__headerbtn {
        position: absolute;
        top: 2px;
        right: 8px;
        i {
          font-size: 12px;
          color: #666666;;
        }
      }
    }
  }
}
.channelLive {
  .el-dialog__header {
    padding: 0;
  }
  .closeBtn {
    width: 40px;
    height: 40px;
    content: '';
    display: block;
    transition: background .2s linear;
    background: url("../img/strategy/close_icon.png");
    position: absolute;
    cursor: pointer;
    top: -48px;
    right: -40px;
    &:hover {
      background: url("../img/strategy/close_hover_icon.png");
    }
  }
  &.el-dialog {
    width: 400px;
    background-color: #ffffff;
    border-radius: 10px;
  }
  .el-scrollbar__thumb {
    background: #ccc;
  }
  .el-scrollbar__wrap{
    overflow-x: hidden;
    margin-bottom: 0!important;
    max-height: 390px;
  }
  .el-dialog__body {
    padding: 14px 0 5px;
    .title {
      text-align: center;
      font-size: 16px;
      color: #222222;
      margin-bottom: 14px;
      &:after,&:before {
        content: '';
        display: inline-block;
        width: 24px;
        height: 2px;
        background: #222;
        transform: translateY(-4px);
      }
      &:after {
        margin-left: 10px;
      }
      &:before {
        margin-right: 10px;
      }
    }
    .channelLiveBox {
      padding: 0px 3px 0 15px;
      max-height: 390px;
      overflow: hidden;
      .channelLiveBoxUl {
        max-height: 390px;
        width: 100%;
        padding-right: 12px;
        li {
          height: 66px;
          border-bottom: solid 1px #eeeeee;
          padding-top: 10px;
          &:last-child {
            border-bottom: none;
          }
          .paiming {
            font-size: 14px;
            color: #333333;
            float: left;
            width: 27px;
            height: 30px;
            margin-right: 24px;
            margin-top: 8px;
            text-align: center;
            line-height: 30px;
            &.diyiM {
              background: url("../../../static/img/top1.png");
            }
            &.dierM {
              background: url("../../../static/img/top2.png");
            }
            &.disanM {
              background: url("../../../static/img/top3.png");
            }
          }
          .info {
            float: left;
            img {
              width: 45px;
              height: 45px;
              border-radius: 50%;
              border: solid 1px #e9e9e9;
              float: left;
              margin-right: 12px;
            }
            .infoBox {
              float: left;
              margin-top: 6px;
              margin-right: 12px;
              .infoBoxName {
                font-size: 14px;
                line-height: 15px;
                color: #222;
                max-width: 114px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-bottom: 6px;
              }
              .infoBoxKind {
                width: 114px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 14px;
                line-height: 14px;
                color: #666;
              }
            }
          }
          .diyueL {
            font-size: 14px;
            color: #333333;
            float: left;
            margin-top: 13px;
            &:before {
              display: inline-block;
              content: '';
              width: 15px;
              height: 15px;
              background: url("../../../static/img/dingyueshu_icon.png");
              margin-right: 10px;
            }
          }
          .dyBtn {
            font-size: 14px;
            color: #fff;
            border-radius: 12px;
            background: #4b64c4;
            margin-top: 10px;
            float: left;
            margin-left: 20px;
            transition: all .2s linear;
            width: 60px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            cursor: pointer;
            &.yidyBtn {
              background-color: #cccccc;
              color: #fff;
              cursor: default;
              &:hover {
                background: #cccccc;
              }
            }
            &:hover {
              background: #5470dd;
            }
          }
        }
      }
    }
  }
}

.slide-title {
  text-align: center;
  line-height: 22px;
  font-size: 16px;
  position: relative;
  margin: 16px 16px 0;
}

.slide-back {
  background: url("../img/slide-back.png") center no-repeat;
  width: 20px;
  height: 100%;
  position: absolute;
  left: -5px;
  top: 0;
  cursor: pointer;
}

.slide-right {
  position: absolute;
  background: url("../img/slide-right.png") center no-repeat;
  width: 8px;
  height: 51px;
  right: -8px;
  top: 50%;
  margin-top: -30px;
  cursor: pointer;
}

.slide-course {
  font-size: 14px;
}

.slide-qrcode {
  text-align: center;
  img {
    display: block;
    width: 244px;
    height: 244px;
    margin: 20px 0;
  }
}

.slide-item {
  padding: 22px;
}

.left-panel {
  width: 220px;
  height: 100%;
  position: absolute;
  background-color: #000;
  top: 0;
  left: 80px;
  display: none;
  span {
    position: absolute;
    background: url(../img/arrow1.png) 22px center no-repeat #000;
    height: 38px;
    width: 38px;
    top: 50%;
    margin-top: -18px;
    right: -12px;
    border-radius: 50%;
    cursor: pointer;
  }
}
.live-box-header {
  position: absolute;
  width: 100%;
  height: 60px;
  background: #232834;
  z-index: 1111;
  top: 0;
  .hd-left {
    float: left;
    .z-logo {
      width: 187px;
      margin: 3px 0 0 20px;
      height: 51px;
      display: inline-block;
      background: url("../../../static/img/gongkaike.png");
      vertical-align: middle;
    }
    .z-name {
      vertical-align: middle;
      margin-left: 10px;
      display: inline-block;
      padding-top: 15px;
      .z-icon {
        width: 14px;
        height: 14px;
        display: inline-block;
        vertical-align: top;
        margin-top: 1px;
        background: url("../../../static/img/play_icon2.gif");
      }
      .z-text {
        vertical-align: top;
        display: inline-block;
        font-size: 16px;
        font-weight: normal;
        line-height: 18px;
        color: #fff;
      }
    }
    .z-peixun {
      display: inline-block;
      margin-top: 6px;
      width: 155px;
      height: 30px;
      background-color: #eeae37;
      border-radius: 4px;
      font-size: 14px;
      line-height: 30px;
      text-align: center;
      color: #ffffff;
      i {
        width: 16px;
        height: 11px;
        display: inline-block;
        margin-left: 5px;
        margin-top: 8px;
        vertical-align: top;
        background: url("../../../static/img/big_go_icon.png");
      }
      em {
        font-weight: normal;
      }
    }
  }
  .hd-right {
    float: right;
    .z-share {
      display: inline-block;
      cursor: pointer;
      margin-right: 10px;
      i {
        width: 12px;
        height: 12px;
        display: inline-block;
        margin-right: 5px;
        background: url("../../../static/img/share_icon.png");
      }
      em {
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        color: #6d717c;
      }
    }
    .z-contact {
      display: inline-block;
      margin: 15px 10px 0 0;
      width: 115px;
      height: 30px;
      background-color: #3c92e8;
      border-radius: 4px;
      font-size: 14px;
      line-height: 30px;
      text-align: center;
      color: #ffffff;
      i {
        width: 13px;
        height: 15px;
        display: inline-block;
        margin-right: 5px;
        margin-top: 8px;
        vertical-align: top;
        background: url("../../../static/img/kefu_icon.png");
      }
      em {
        font-weight: normal;
      }
    }
    .z-peixun {
      display: inline-block;
      margin: 15px 10px 0 0;
      width: 155px;
      height: 30px;
      background-color: #eeae37;
      border-radius: 4px;
      font-size: 14px;
      line-height: 30px;
      text-align: center;
      color: #ffffff;
      i {
        width: 16px;
        height: 11px;
        display: inline-block;
        margin-left: 5px;
        margin-top: 8px;
        vertical-align: top;
        background: url("../../../static/img/big_go_icon.png");
      }
      em {
        font-weight: normal;
      }
    }
  }
}

.mainbody {
  position: fixed;
  left: 5px;
  right: 654px;
  top: $contentTop;
  bottom: 10px;
  min-width: 560px;
  //  transition: left .3s ease-in-out;
  .mainbody-con {
    position: relative;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .live-box-btn {
      position: absolute;
      background: url("../img/arrow-bg.png") center no-repeat;
      width: 41px;
      height: 17px;
      top: 60px;
      bottom: -15px;
      right: 0px;
      z-index: 2;
      cursor: pointer;
      display: none;
      i {
        background: url("../img/jiantou_icon.png") center no-repeat;
        width: 13px;
        height: 10px;
        display: block;
        margin: 0 auto;
        transform: rotate(0deg);
        transition: transform .2s ease-in-out;
        margin-top: 3px;
      }
    }

    &.on {
      .live-box-btn {
        top: 0px;
        i {
          transform: rotate(180deg);
        }
      }
      .live-box-header {
        display: none;
      }
      //.live-box {
      //  padding-top: 53%;
      //}
    }
  }
  .mainbody-view {
    position: absolute;
    top: 0;
    width: 100%;
    bottom: 150px;
    overflow: hidden;
    border-radius: 5px 5px 0px 0px;
  }
}

.mainbody2 {
  left: $slideContentWidth + $gutter;
}

.mainbody-class-schedule {
  padding: 6px 10px 10px;
  background: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 135px;
  margin-top: 15px;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  border-radius: 5px;
  .class-schedule-title {
    border-bottom: 1px solid rgba(50, 65, 138, 0.4);
    padding-bottom: 5px;
    > h3 {
      position: relative;
      line-height: 16px;
      font-size: 14px;
      color: #fff;
      display: inline-block;
      &:before {
        position: absolute;
        width: 36px;
        height: 3px;
        background: #4962c1;
        content: '';
        bottom: -10px;
        left: 0;
      }
    }
    > a {
      font-size: 14px;
      color: #94a9f7;
      margin-left: 25px;
    }
    > p {
      width: 95px;
      height: 25px;
      float: right;
      background: #eeae37;
      border-radius: 3px;
      font-size: 14px;
      color: #fff;
      line-height: 25px;
      cursor: pointer;
      transition: all .2s linear;
      &:hover {
        background: #e09f28;
      }
      i {
        width: 12px;
        height: 13px;
        background: url("../../../static/img/add_icon.png") no-repeat;
        display: inline-block;
        margin: 0 5px 0 10px;
        transform: translateY(1px);
      }
    }
  }

  .swiper-view {
    height: 100px;
    padding: 0 35px;
    position: relative;
    .button-prev-z {
      position: absolute;
      top: 24px;
      left: -10px;
      width: 24px;
      height: 42px;
      background: url("../../../static/img/left2.png") no-repeat;
      cursor: pointer;
      &:hover {
        background: url("../../../static/img/left1.png") no-repeat;
      }
    }
    .button-next-z {
      position: absolute;
      top: 24px;
      right: -10px;
      width: 21px;
      height: 42px;
      background: url("../../../static/img/right2.png") no-repeat;
      cursor: pointer;
      &:hover {
        background: url("../../../static/img/right1.png") no-repeat;
      }
    }
    .swiper-slide {
      height: 100px;
      &:hover {
        .class-schedule-item {
          .time {
            em {
              display: none;
            }
            .download-class {
              display: block;
            }
          }
        }

      }
    }
  }

}

.class-schedule-item {
  text-align: center;
  position: relative;
  padding-top: 11px;
  &.is_active {
    &:before {
      background: #eeae37;
      left: 75%;
      width: 71%;
    }
    .text {
      > em {
        font-size: 14px;
        color: #eeae37;
      }
    }
    .dots {
      width: 26px;
      height: 26px;
      top: 42px;
      margin-left: -2px;
      &:after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        background-color: #eeae37;
        border-radius: 50%;
        top: -3px;
        left: 5px;
      }
      &:before {
        top: 1px;
        background: #ffffff;
      }
    }
    .time {
      > em {
        color: #eeae37;
      }
    }
  }
  &.end_active {
    .dots {
      &:before {
        background-color: #ffffff;
      }
    }
    &:before {
      background: #fff;
    }
    .text {
      > em {
        font-size: 12px;
        color: #ffffff;
      }
    }
    .time {
      > em {
        color: #ffffff;
      }
    }
  }
  &:before {
    position: absolute;
    content: '';
    top: 45px;
    left: 66%;
    bottom: -20px;
    width: 80%;
    height: 4px;
    background: #b4bad2;
  }
  .dots {
    content: '';
    position: absolute;
    left: 50%;
    top: 43px;
    margin-left: -4px;
    bottom: -22px;
    width: 20px;
    height: 20px;
    &:before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      margin-left: -4px;
      bottom: -22px;
      width: 8px;
      height: 8px;
      border-radius: 20px;
      background-color: #b4bad2;
      z-index: 10;
    }
  }
  .text {
    display: block;
    width: 105px;
    margin: 0 auto;
    font-size: 12px;
    color: #b4bad2;
    position: relative;
    .down-icon {
      width: 12px;
      height: 12px;
      margin-right: 3px;
      display: inline-block;
      background: url("../../../static/img/xiazai.png");
      background-size: 100% 100%;
    }
    > em {
      display: inline-block;
      max-width: 120px; /*这个根据实际需要设置大小*/
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      color: #b4bad2;
    }
  }
  .time {
    position: absolute;
    width: 100%;
    display: block;
    bottom: -90px;
    top: 60px;
    font-size: 12px;
    text-align: center;
    height: 50px;
    > em {
      text-align: center;
      color: #b4bad2;
    }
    > a {
      display: block;
      text-align: center;
    }
    .download-class {
      position: absolute;
      left: 50%;
      margin-left: -40px;
      display: none;
      width: 80px;
      height: 25px;
      border-radius: 3px;
      border: solid 1px  #2c2d60;
      font-size: 12px;
      color: #ffffff;
      line-height: 25px;
      &:hover {
        background: #4b64c4;
        border: solid 1px #4b64c4;
      }
    }
  }
}

.item-block {
  background-color: #ffffff;
}

.room-bulletin {
  height: 30px;
  line-height: 30px;
  background: url("../img/icon-bulletin.png") 20px center no-repeat #000;
  color: #EDDFC9;
  padding-left: 50px;
}

.live-box {
  width: 100%;
  padding-top: 56.25%;
  background-color: #000000;
  position: relative;
  embed {
    background-color: #000000;
  }
}

#live {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  a {
    color: #ffffff;
  }
}

.chat-room {
  width: 639px;
  position: fixed;
  top: $contentTop;
  right: 5px;
  bottom: 10px;
  z-index: 99;
}

$anchor-height: 60px;
.anchor-info {
  height: $anchor-height;
  padding: 8px 26px;
  img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    float: left;
  }
  h2 {
    font-size: 20px;
    line-height: 44px;
    float: left;
    margin-left: 15px;
  }
  .name {
    float: left;
    line-height: 44px;
    margin-left: 10px;
  }
  %anchor-img {
    display: none;
    width: 25px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 10px;
    margin-left: 10px;
  }
  .anchor-attention {
    display: none;
    float: left;
    background: #C6AA7B;
    background: linear-gradient(-180deg, #DDC89C 0%, #C6AA7B 100%);
    border-radius: 11px;
    color: #ffffff;
    padding: 0 10px;
    margin-top: 10px;
    margin-left: 10px;
  }
  .anchor-chat {
    @extend %anchor-img;
    float: left;
    background-image: url("../img/icon-chat.png");
  }
  .anchor-share {
    @extend %anchor-img;
    float: right;
    background-image: url("../img/icon-share.png");
  }
  .anchor-refresh {
    @extend %anchor-img;
    float: right;
    background-image: url("../img/icon-refresh.png");
  }
}

.login-layer {
  width: 460px;
}
.qrCodeStart {
  top: initial!important;
  bottom: 266px;
  right: 115px;
  left: initial!important;
  padding: 0;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0px #a3a3a3;
  .popper__arrow {
    display: none;
  }
  i {
    position: absolute;
    width: 11px;
    height: 11px;
    background: url("../../../static/img/close_icon.png");
    right: 4px;
    top: 4px;
    cursor: pointer;
  }
  .qrCodeBox {
    width: 100%;
    height: 192px;
    text-align: center;
    padding-top: 8px;
    p {
      font-size: 14px;
      color: #232834;
      line-height: 20px;
      margin-bottom: 10px;
    }
    div {
      width: 125px;
      height: 125px;
      background-color: #ffffff;
      border: solid 1px #d6d6d6;
      margin: auto;
      text-align: center;
      img {
        width: 112px;
        height: 112px;
        margin-top: 6px;
      }
    }
  }
}
.topStart {
  padding: 0;
  background-color: #ffffff;
  box-shadow: 0px -2px 3px 0px rgba(147, 146, 146, 0.44);
  border-radius: 5px;
  top: initial!important;
  bottom: 200px;
  right: 115px;
  left: initial!important;
  .popper__arrow {
    display: none;
  }
}
.gift-block {
  text-align: center;
  background-color: #ffffff;
  height: 40px;
  line-height: 40px;
  border-bottom: solid 1px #e1e1e1;
  .select-gift-type {
    font-size: 12px;
    height: 36px;
    .el-radio {
      margin: 0 16px;
    }
    .el-radio__inner {
      width: 14px;
      height: 14px;
      border: 1px solid #4b64c4;
    }
    .el-radio__input.is-checked .el-radio__inner {
      background: #ffffff;
    }
    .el-radio__inner::after {
      background: #4b64c4;
    }
  }
}

.gift-block-title {
  font-size: 14px;
  position: relative;
  i {
    position: absolute;
    width: 11px;
    height: 11px;
    background: url("../../../static/img/close_icon.png");
    right: 12px;
    top: 14px;
    cursor: pointer;
  }
}

.gift-list {
  padding: 0 10px;
  li {
    margin-right: 8px;
    margin-top: 10px;
    width: 79px;
    height: 102px;
    float: left;

    img {
      display: block;
      width: 61px;
      height: 61px;
      margin: 0 auto;
      padding: 2px;
      border-radius: 7px;
      cursor: pointer;
    }
    &:nth-child(3n) {
      margin-right: 0;
    }

    .gift-bor {
      width: 73px;
      height: 73px;
      background: url("../../../static/img/bgbor1.png");
      position: relative;
      margin: 0 auto;
      cursor: pointer;
      .name {
        position: absolute;
        bottom: 0;
        line-height: 15px;
        font-size: 12px;
        color: #ffffff;
        width: 100%;
        display: block;
        text-align: center;
      }
      &.active {
        width: 79px;
        height: 79px;
        background: url("../../../static/img/bgbor2.png");
        .name {
          bottom: 5px;
        }
      }
      &.active+p {
        color: #4b64c4;
        margin-top: -6px;
      }
    }
  }
  p {
    color: #333333;
    font-size: 14px;
  }

}

.recharge {
  float: right;
  width: 100%;
  button {
    width: 90px;
    height: 28px;
    background-color: #4b64c4;
    border-radius: 3px;
    color: #ffffff;
    margin-bottom: 10px;
    &:hover {
      box-shadow: 0 0 5px rgba(#6f5b39, .35);
    }
    &:active {
      box-shadow: none;
    }
  }
}

.room-news {
  padding: 22px;
  ul {
    background: url("../img/icon-news.png") left center no-repeat #fff;
    line-height: 24px;
    height: 24px;
    overflow: hidden;
    padding-left: 44px;
  }
}

.chat-block {
  border-radius: 5px 5px 0 0;
  .gitPhoto {
    position: absolute;
    z-index: 111;
    right: 140px;
    top: 111px;
  }
}

.chat-head {
  position: relative;
  z-index: 100;
}

.chat-head-teacher-view {
  padding: 10px 20px;
  height: 173px;
  overflow: hidden;
  transition: all .5s;
  -webkit-transition: all .5s;
  position: relative;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 5px 5px 0 0;
  .upAndTop {
    position: absolute;
    cursor: pointer;
    font-size: 12px;
    color: #7d8bc1;
    right: 20px;
    top: 11px;
    z-index: 11;
    i {
      background: url("../img/arrow.png") center no-repeat;
      transform: rotate(180deg);
      width: 11px;
      height: 8px;
      display: inline-block;
      margin: 0 auto;
      margin-right: 5px;
      transition: transform .2s ease-in-out;
    }
    &.on {
      i {
        transform: rotate(0deg);
      }
    }
  }
  > h3 {
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #fff;
    span {
      display: inline-block;
      padding-left: 28px;
      position: relative;
      &:before {
        position: absolute;
        content: '';
        height: 18px;
        left: 0;
        top: 2px;
      }
      &:first-child {
        max-width: 192px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 70px;
        &:before {
          width: 18px;
          background: url("../img/course_icon.png");
        }
      }
      &:last-child {
        max-width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:before {
          width: 16px;
          background: url("../img/teacher_icon.png");
        }
      }
    }
  }
  .el-carousel {
    margin-top: 11px;
    position: relative;
    width: 599px;
    height: 120px;
    .el-carousel__container {
      width: 100%;
      height: 120px;
      .el-carousel__item {
        height: 100%;
        width: 100%;
        img {
          height: 100%;
          width: 100%;
          cursor: pointer;
        }
      }
    }
    .el-carousel__indicator {
      padding: 0;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
      &.is-active {
        .el-carousel__button {
          background: #fff;
        }
      }
      .el-carousel__button {
        width: 12px;
        height: 12px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
      }
    }
    .el-carousel__arrow {
      border-radius: 0;
      background-color: rgba(0, 0, 0, 0.5);
      width: 40px;
      height: 32px;
    }
    .el-carousel__arrow--right {
      right: 0;
    }
    .el-carousel__arrow--left {
      left: 0;
    }
  }
}

.chat-announcement {
  width: 600px;
  height: 26px;
  position: absolute;
  top: 223px;
  background-color: #fff;
  z-index: 99;
  opacity: 1;
  transition: .3s all;
  left: 12px;
  -webkit-transition: .3s all;
  border-radius: 12px;
  &.on {
    top: 187px;
  }
  .chat-announcement-text {
    position: relative;
    &:before {
      position: absolute;
      content: '';
      width: 30px;
      height: 30px;
      margin-top: -2px;
      margin-left: -4px;
      display: inline-block;
      background: url("../../../static/img/remind_icon.png");
    }
    marquee {
      margin-left: 35px;
      margin-top: 2px;
      height: 25px;
    }
    p {
      display: inline-block;
      margin-left: 10px;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 0px;
      letter-spacing: 0px;
      color: #333;
      margin-right: 20px;
    }
    i {
      position: absolute;
      bottom: -6px;
      right: 11px;
      width: 30px;
      height: 15px;
      background-color: #4b64c4;
      display: block;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      cursor: pointer;
      &.on {
        &:before {
          transform: rotate(180deg);
        }
      }
      &:before {
        content: '';
        width: 10px;
        height: 8px;
        display: block;
        margin: 3px auto 0;
        background: url("../../../static/img/top_icon.png");
        transition: .3s all;
        -webkit-transition: .3s all;
      }
    }
  }
}

.login-message {
  position: absolute;
  right: 40px;
  top: 250px;
  opacity: 0;
  z-index: 11;
  width: 350px;
  height: 52px;
  &.on {
    animation: myfirst 3s ease-in-out forwards;
    -webkit-animation: myfirst 3s ease-in-out forwards; /* Safari and Chrome */
  }
}

@keyframes myfirst {
  0% {
    top: 210px;
    opacity: 0;
    z-index: 0;
  }
  80% {
    top: 250px;
    opacity: 1;
    z-index: 11;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0% {
    top: 210px;
    opacity: 0;
    z-index: 0;
  }
  80% {
    top: 250px;
    opacity: 1;
    z-index: 11;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}

/*.chat-arrow {
  position: absolute;
  background: url("../img/arrow-bg.png") center no-repeat;
  width: 41px;
  height: 18px;
  top: -170px;
  bottom: -15px;
  right: 20px;
  z-index: 2;
  cursor: pointer;
  i {
    background: url("../img/arrow.png") center no-repeat;
    width: 11px;
    height: 8px;
    display: block;
    margin: 0 auto;
    transition: transform .2s ease-in-out;
  }
}*/

.chat-scroll {
  font-size: 14px;
  color: #1968b1;
  float: left;
  text-align: center;
  display: block;
  margin-top: 10px;
  margin-left: 10px;
  &:before {
    content: '';
    width: 25px;
    height: 19px;
    vertical-align: top;
    margin-right: 3px;
    margin-top: 3px;
    margin-left: 3px;
    display: inline-block;
    background: url("../../../static/img/gunpin_icon1.png") no-repeat;
  }
  &.on {
    &:before {
      background: url("../../../static/img/gunpin_icon.png") no-repeat;
    }
  }
}

.chat-share {
  font-size: 14px;
  color: #eeae37;
  text-align: center;
  float: left;
  display: block;
  margin-top: 10px;
  margin-left: 20px;
  cursor: pointer;
  position: relative;
  &:hover {
    .shareBox {
      display: block;
    }
  }
  &:before {
    content: '';
    width: 15px;
    height: 15px;
    vertical-align: top;
    margin-top: 6px;
    margin-right: 3px;
    display: inline-block;
    background: url("../../../static/img/share_icon.png");
  }

  .shareBox {
    width: 457px;
    height: 224px;
    background: url("../../../static/img/sharebg.png");
    position: absolute;
    right: -220px;
    top: -224px;
    text-align: center;
    padding: 30px;
    display: none;
    z-index: 1111;
    .shareWXBox {
      position: relative;
      float: left;
      &:after {
        width: 1px;
        height: 142px;
        background: #ebebeb;
        content: '';
        bottom: 5px;
        right: -26px;
        position: absolute;
      }
      .shareWX {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        line-height: 16px;
      }
      .shareWXInfo {
        font-size: 12px;
        color: #666666;
        line-height: 16px;
        margin: 4px 0 6px;
      }
      .ermBox {
        width: 110px;
        height: 110px;
        border: solid 1px #ebebeb;
        margin: auto;
        img {
          width: 108px;
          height: 108px;
          margin-top: 1px;
        }
      }
    }
    .shareOtherBox {
      float: right;
      padding-top: 22px;
      .fuzhi {
        position: relative;
        input {
          width: 217px;
          height: 30px;
          background-color: #ffffff;
          border-radius: 3px;
          border: solid 1px #dfdfdf;
          padding-left: 7px;
          font-size: 14px;
          color: #666666;
        }
        .fuzhibtn {
          font-size: 14px;
          position: absolute;
          right: 0;
          top: 0;
          background: #eae8e9;
          color: #666666;
          height: 30px;
          width: 70px;
        }
      }
      .bdsharebuttonbox {
        margin-bottom: 20px;
        a {
          float: inherit;
          margin-left: 0;
        }
        .bds_tsina {
          width: 45px;
          height: 45px;
          background: url("../../../static/img/weibo.png");
          display: inline-block;
          margin-right: 36px;
        }
        .bds_qzone {
          width: 45px;
          height: 45px;
          background: url("../../../static/img/qzone.png");
          display: inline-block;
          margin-right: 36px;
        }
        .bds_sqq {
          width: 45px;
          height: 45px;
          background: url("../../../static/img/qq.png");
          display: inline-block;
        }
      }
    }
  }
}

.chat-clear {
  font-size: 14px;
  color: #1968b1;
  text-align: center;
  float: left;
  display: block;
  margin-top: 10px;
  margin-left: 10px;
  &:before {
    content: '';
    width: 18px;
    height: 18px;
    vertical-align: top;
    margin-top: 3px;
    margin-left: 3px;
    margin-right: 3px;
    display: inline-block;
    background: url("../../../static/img/qingpin_icon.png");
  }
}

.antswith {
  height: 25px;
  overflow: hidden;
  margin-top: 10px;
  .el-switch__label {
    &.el-switch__label--right {
      span {
        right: 2px;
      }
    }
    &.el-switch__label--left {
      span {
        left: 2px;
      }
    }
     span {
       font-size: 12px;
       top: 6px;
     }
  }
}
.fixgifImg {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 111111;
}
.unblock-gossip {
  position: absolute;
  top: 90px;
  right: 18px;
  width: 96px;
  cursor: pointer;
  a {
    font-size: 12px;
    color: #fff;
    position: relative;
    &:before {
      position: absolute;
      width: 11px;
      height: 11px;
      background-color: #f5f5f5;
      content: '';
      border-radius: 50%;
      left: -17px;
      top: 2px;
    }
  }
}

.chat-open-btn {
  position: absolute;
}

.chat-nav {
  height: 40px;
  display: -moz-box;
  display: -webkit-box;
  display: box;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  width: 100%;
  .redPoint {
    position: relative;
    &:after {
      position: absolute;
      content: '';
      width: 6px!important;
      height: 6px;
      background-color: #eeae37;
      border-radius: 50%;
      top: 4px;
      transform: translateX(-4px);
    }
  }
  li {
    width: 100%;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    // border-bottom: 3px solid transparent;
    position: relative;
    background-color: #ffffff;
    color: #444444;
    &:last-child:after {
      width: 0;
    }
    &.active {
      background-color: #4b64c4;
      color: #ffffff;
      &:after {
        width: 0;
      }
    }
  }
}

.chatGoRight .chat-nav-bar {
  right: 0;
}

.chat-cont {
  position: absolute;
  top: 213px;
  bottom: 140px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  transition: top .3s ease-in-out;
  .qrCode {
    width: 60px;
    height: 63px;
    background: url("../../../static/img/phone.png");
    position: absolute;
    bottom: 152px;
    right: 31px;
    z-index: 1111;
    cursor: pointer;
  }
  .chatFigt {
    background: url("../../../static/img/shang.gif");
    position: absolute;
    bottom: 68px;
    right: 20px;
    z-index: 1111;
    width: 85px;
    height: 76px;
    cursor: pointer;
  }
}
.bottom0 {
  bottom: 0px;
}

.chat-bottom {
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.55);
  width: 100%;
  border-radius: 0px 0px 5px 5px;
}

.chat-tool {
  height: 44px;
  border-bottom: 1px solid rgba(37, 49, 103, 0.4);
  a {
    float: left;
    margin-left: 14px;
  }
  .left-icon {
    float: right;
    .reply-btn {
      font-size: 14px;
      color: #fec457;
      padding-top: 9px;
      margin-left: 0px;
      margin-right: 20px;
    }

    .liveManagement {
      float: left;
      font-size: 14px;
      color: #fff;
      margin-right: 20px;
      padding-top: 9px;
      margin-left: 14px;
      cursor: pointer;
      position: relative;
      &:hover {
        .liveManagementBox {
          display: block;
        }
      }
      &:before {
        content: '';
        display: inline-block;
        width: 17px;
        height: 18px;
        margin-right: 6px;
        background: url("../../../static/img/manage_icon.png");
        transform: translateY(4px);
      }
      .liveManagementBox {
        width: 100px;
        height: 130px;
        background: rgba(0,0,0,0.6);
        position: absolute;
        bottom: 35px;
        left: -20px;
        cursor: default;
        padding-top: 12px;
        display: none;
        z-index: 1111111;
        a {
          margin-left: 0;
          margin-bottom: 6px;
        }
        &:before {
          position: absolute;
          content: '';
          width: 0;
          height: 0;
          bottom: -16px;
          left: 48px;
          border-top: 8px solid rgba(0, 0, 0, 0.6);
          border-bottom: 8px solid transparent;
          border-right: 8px solid transparent;
          border-left: 8px solid transparent;
        }
        .announcement-text {
          font-size: 12px;
          color: #96a7e6;
          &:before {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            background: url("../../../static/img/gonggao_icon.png");
            transform: translateY(3px);
            margin: 0 9px 0 14px;
          }
        }
        .announcement-box {
          font-size: 12px;
          color: #96a7e6;
          &:before {
            content: '';
            display: inline-block;
            width: 16px;
            margin: 0 8px 0 14px;
            height: 14px;
            background: url("../../../static/img/gonggaixiang_icon.png");
            transform: translateY(2px);
          }
        }
        .joinChannel-text {
          font-size: 12px;
          color: #96a7e6;
          &:before {
            content: '';
            display: inline-block;
            width: 15px;
            height: 10px;
            margin: 0 8px 0 14px;
            background: url("../../../static/img/qiehuan_icon1.png");
          }
        }
        .all-gossip-text {
          font-size: 12px;
          color: #96a7e6;
          &.jinyan {
            &:before {
              background: url("../../../static/img/jinyan_icon02.png");
            }
          }
          &:before {
            content: '';
            display: inline-block;
            width: 13px;
            height: 13px;
            margin: 0 10px 0 14px;
            background: url("../../../static/img/jinyan_icon01.png");
            transform: translateY(1px);
          }
        }
      }
    }
  }
}

%chat-img {
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  margin: 0 3px;
  height: 44px;
}

.chat-face {
  @extend %chat-img;
  margin-left: 17px !important;
  background-image: url("../../../static/img/biaioqing_icon.png");
}

.chat-img {
  @extend %chat-img;
  width: 32px;
  background-image: url("../../../static/img/pic_icon.png");
}

.chat-figt {
  @extend %chat-img;
  background-image: url("../../../static/img/hongbao_icon.png");
  width: 30px;
  height: 30px;
  margin-top: 6px;
}

.chat-red {
  @extend %chat-img;
  background-image: url("../img/icon-red.png");
}

.chatImgTip {
  float: left;
  text-align: center;
  a {
    display: block;
    font-size: 14px;
    float: none;
    line-height: 2.2;
  }
}

.chat-phone-k {
  font-size: 14px;
  color: #eeae37;
  padding-top: 11px;
  i {
    width: 13px;
    height: 15px;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    margin-top: 4px;
    background: url("../../../static/img/kefu_icon1.png");
  }
}

%chat-btn {
  line-height: 24px;
  border: 1px solid;
  padding: 0 7px;
  border-radius: 13px;
  margin-top: 9px;
}

.chat-form {
  height: 96px;
  width: 100%;
  padding-left: 20px;
  padding-top: 8px;
  textarea {
    float: left;
    width: 489px;
    height: 78px;
    padding: 5px;
    overflow-y: auto;
    outline: none;
    height: 78px;
    background-image: linear-gradient(#3b3f53, #3b3f53), linear-gradient(rgba(59, 63, 83, 0.2), rgba(59, 63, 83, 0.2));
    border-radius: 3px;
    border: solid 1px rgba(59, 63, 83, 0.2);
    color: #94a9f7;
    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
      color:    #94a9f7;
    }
    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color:    #94a9f7;
    }
    &::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:    #94a9f7;
    }
    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color:    #94a9f7;
    }
  }
  button {
    width: 104px;
    float: left;
    height: 78px;
    border: none;
    color: #ffffff;
    font-size: 16px;
    background: #4b64c4;;
    border-radius: 3px;
    margin-left: 5px;
  }
  &.reply-input {
    .reply-input-left {
      float: left;
      width: 489px;
      height: 78px;
      background-color: rgba(46, 53, 96, 0.2);
      border-radius: 3px;
      border: solid 1px rgba(46, 53, 96, 0.2);
      border-right: none;
      padding: 5px 10px;
      p {
        border-bottom: solid 1px rgba(255, 255, 255, 0.1);
        font-size: 12px;
        padding-bottom: 5px;
        color: #94a9f7;
      }
      input {
        margin-top: 5px;
        width: 100%;
        border: none;
        background: none;
        color: #94a9f7;
      }
    }
  }
}

@keyframes scaleBg {
  0%{
    transform: scale(1,1);
  }
  100%{
    transform: scale(1.5,1.5);
  }
}

.noticeBox {
  width: 400px;
  background-color: #ffffff;
  border-radius: 6px;
  .el-dialog__header {
    padding: 10px 0 10px 20px;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid #e5e5e5;
    font-size: 16px;
    color: #333333;
    .el-dialog__headerbtn {
      top: 10px!important;
      right: 14px!important;
    }
  }
  .el-dialog__body {
    padding: 44px 0px 8px;
    text-align: center;
    .info {
      padding: 0 56px;
      p {
        font-size: 16px;
        color: #333;
        margin-bottom: 40px;
        line-height: 22px;
      }
    }
    .allBtn {
      padding: 8px 12px 0 0;
      border-top: 1px solid #e5e5e5;
      a {
        display: inline-block;
        width: 115px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        border-radius: 3px;
        -webkit-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -ms-transition: all .2s linear;
        -o-transition: all .2s linear;
        transition: all .2s linear;
        cursor: pointer;
        background-color: #3c92e9;
        border: solid 1px #3c92e9;
        color: #ffffff;
        &:hover {
          background-color: #1f80cb;
          border: solid 1px #1f80cb;
        }
      }
    }
  }
}

.chat-item {
  height: 100%;
  overflow-y: auto;
  .privateDiv {
    cursor: pointer;
    position: absolute;
    width: 46px;
    height: 46px;
    top: 100px;
    right: 40px;
    .privateBtn {
      width: 46px;
      height: 46px;
    }
    .noReaderNum {
      background-color: #eeae37;
      font-size: 12px;
      text-align: center;
      color: #ffffff;
      position: absolute;
      &.less99 {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        line-height: 18px;
        right: -2px;
        top: -4px;
      }
      &.greater99 {
        width: 29px;
        height: 16px;
        background-color: #eeae37;
        border-radius: 7px;
        line-height: 14px;
        right: -10px;
        top: -4px;
      }
    }
    .bgCircle {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(149, 169, 246, 0.2);
      border-radius: 100%;
      animation: scaleBg 1s linear alternate infinite;
    }
  }
  .chat-item-title {
    padding: 15px;
    .z-xian {
      float: left;
      color: #ffffff;
      em {
        color: #eeae37;
        font-weight: bold;
      }
    }
    .chat-item-title-right {
      float: right;
      position: relative;
      .y-gossip {
        width: 90px;
        height: 25px;
        background-color: #fff;
        border-radius: 12px;
        display: inline-block;
        font-size: 12px;
        text-align: center;
        line-height: 25px;
        color: #333;
        margin-right: 15px;
        cursor: pointer;
      }
    }
  }
}
.chat-celue {
  height: 100%;
  .chat-celue-top {
    margin: 20px 0 16px;
    padding: 0 10px;
    .chat-celue-top-time {
      display: inline-block;
      width: 177px;
      height: 30px;
      background-color: #ffffff;
      border-radius: 3px;
      border: solid 1px #4b64c4;
      color: #333333;
      line-height: 30px;
      position: relative;
      text-indent: 54px;
      i {
        position: absolute;
        width: 40px;
        height: 100%;
        background-color: #4b64c4;
        background-image: url("../img/strategy/date_icon.png");
        background-repeat: no-repeat;
        background-position: center;
        left: 0;
      }
    }
    .chat-celue-top-push {
      float: right;
      width: 110px;
      height: 30px;
      background-color: #4b64c4;
      border-radius: 3px;
      color: #ffffff;
      line-height: 30px;
      text-align: center;
      transition: all .2s linear;
      cursor: pointer;
      &:hover {
        background: #5470dd;
      }
    }
    a {
      float: right;
      width: 130px;
      height: 30px;
      border-radius: 3px;
      border: solid 1px #ffffff;
      color: #ffffff;
      text-align: center;
      line-height: 30px;
      margin-left: 20px;
      transition: all .2s linear;
      &:hover {
        background: #4b64c4;
        border: solid 1px #4b64c4;
      }
    }
  }
  .screening {
    padding: 0 10px;
    color: #fff;
    .screeningDaka {
      ul {
        max-height: 58px;
        overflow-y: auto;
        li {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .screeningDaka,.screeningVarieties {
      span {
        float: left;
      }
      ul {
        max-width: 500px;
        float: left;
        li {
          float: left;
          margin-left: 20px;
          text-align: left;
          cursor: pointer;
          margin-bottom: 4px;
        }
        .active {
          color: #eeae37;
        }
      }
    }
    .screeningVarieties {
      margin-top: 4px;
      position: relative;
      span {
        margin-right: 20px;
      }
      ul {
        transition: all .2s;
        li {
          float: left;
          margin-left: 0px;
          text-align: left;
          cursor: pointer;
          width: 80px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:first-child {
            width: 50px;
          }
        }
      }
      .height30 {
        height: 30px;
        overflow: hidden;
      }
      .height88 {
        height: 59px;
        overflow: auto;
      }
      a {
        font-size: 12px;
        color: #eeae37;
        position: absolute;
        right: 0;
        top: 0;
        padding-right: 14px;
        cursor: pointer;
        &:after {
          position: absolute;
          content: '';
          transition: all .2s;
          width: 9px;
          height: 5px;
          background: url("../img/strategy/arrow_icon2.png");
          right: 0;
          top: 8px;
        }
      }
      .up:after {
        transform: rotate(180deg);
      }
    }
  }
  .strategyTitle {
    width: 100%;
    height: 35px;
    background-color: #1c1c24;
    margin-top: 10px;
    span {
      float: left;
      height: 35px;
      color: #ffffff;
      line-height: 35px;
      text-align: center;
      i {
        display: block;
      }
    }
  }
  .strategyData {
    position: absolute;
    bottom: 0;
    width: 100%;
    transition: top .3s ease-in-out;
    overflow: auto;
    .queshen {
      display: block;
      margin: 70px auto 0;
    }
    .strategyUl {
      .strategyLi {
        width: 100%;
        position: relative;
        &:nth-of-type(even) .strategyBoxs {
          background-color: #f7f9ff;
          border-top: 1px solid rgba(234, 237, 246, 0.6);
          border-bottom: 1px solid rgba(234, 237, 246, 0.6);
        }
        &:nth-of-type(odd) .strategyBoxs {
          background-color: #fff;
        }
        .strategyBoxs {
          width: 100%;
          position: relative;
          font-size: 0;
          span {
            text-align: center;
            color: #404040;
            height: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 48px;
            display: inline-block;
            font-size: 14px;
            i {
              display: inline-block;
              width: 50px;
              height: 22px;
              color: #ffffff;
              border-radius: 3px;
              line-height: 22px;
            }
          }
          .trackingNew {
            position: relative;
            &:after {
              position: absolute;
              width: 5px;
              height: 5px;
              background-color: #de4414;
              border-radius: 50%;
              content: '';
              top: 14px;
              transform: translateX(4px);
            }
          }
          .gotoVIP {
            position: absolute;
            width: 110px;
            height: 30px;
            background-color: #b28850;
            border-radius: 3px;
            font-size: 14px;
            color: #ffffff;
            left: 50%;
            transform: translateX(-50%);
            top: 9px;
            cursor: pointer;
            line-height: 30px;
            text-align: center;
            display: none;
          }
        }
        .hastracking {
          &:after {
            content: '';
            width: 9px;
            height: 5px;
            background: url("../img/strategy/arrow_icon.png");
            position: absolute;
            top: 22px;
            transition: all .2s linear;
            right: 5px
          }
        }
        .uptrackAfter {
          background-color: #f7f9ff!important;
          box-shadow: 0px -1px 0px 0px #f2f4fa;
          &:after {
            transform: rotate(180deg);
          }
        }
        .NoVIPsee:hover:after{
          background: url("../img/strategy/arrow_icon3.png");
        }
        .VIPsee {
          cursor: pointer;
        }
        .VIPsee:before {
          position: absolute;
          content: '';
          width: 11px;
          height: 10px;
          background: url("../img/strategy/VIP_icon2.png");
          top: 19px;
          left: 3px;
        }
        .NoVIPsee:before {
          position: absolute;
          content: '';
          width: 11px;
          height: 13px;
          background: url("../img/strategy/lock_vip_icon2.png");
          top: 16px;
          left: 3px;
        }
        .NoVIPsee:hover .gotoVIP {
          display: block;
        }
        .NoVIPsee:hover {
          background-color: rgb(241, 225, 204);
        }
        .NoVIPsee span i {
          background: #fff!important;
          color: #5b5b5b;
        }
        .NoVIPsee:hover span i {
          background-color: rgba(241, 225, 204, 0.56)!important;
          opacity: 0.56;
        }
        .trackInfo {
          background: #eff2fa;
          width: 100%;
          cursor: default;
          border-bottom: 1px solid #add5ff;
          .trackInfoTitle {
            padding: 0 25px;
            height: 35px;
            line-height: 35px;
            font-size: 12px;
            border-bottom: 1px solid rgba(241, 215, 196, 0.6);
            position: relative;
            &:after {
              content: '';
              width: 0;
              height: 0;
              border-left: 8px solid transparent;
              border-right: 8px solid transparent;
              border-bottom: 8px solid #fff;
              position: absolute;
              right: 26px;
              top: -8px;
            }
            .trackInfoTitleOne {
              color: #333;
              margin-right: 33px;
              i {
                font-size: 14px;
                color: #2248b3;
              }
            }
            .trackInfoTitleTwo {
              color: #333;
              i {
                font-size: 14px;
                color: #404040;
              }
            }
            .trackInfoTitle3,.trackInfoTitle4 {
              float: right;
              font-size: 12px;
              color: #e39d61;
              cursor: pointer;
            }
            .trackInfoTitle4 {
              float: right;
              margin-right: 20px;
            }
          }
          ul {
            max-height: 175px;
            overflow-y: scroll;
            li {
              padding: 8px 0 8px 25px;
              overflow: hidden;
              position: relative;
              transition: a11 .2s linear;
              a {
                width: 100px;
                height: 28px;
                background-color: #3c92e8;
                border-radius: 3px;
                position: absolute;
                color: #ffffff;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                line-height: 28px;
                text-align: center;
                cursor: pointer;
                display: none;
              }
              &:hover {
                background-color: rgba(166,211,255,0.5);
              }
              &.nologin:hover a {
                display: block;
              }
              &:after {
                position: absolute;
                content: '';
                border: 1px dashed #e4edf8;
                width: 520px;;
                right: 0;
                bottom: 0;
              }
              &:before {
                position: absolute;
                content: '';
                height: 100%;
                width: 1px;;
                background-color: #dce9f8;
                left: 32px;
                top: 0;
              }
              &:first-child {
                &:before {
                  top: 26px;
                }
              }
              &:last-child {
                &:after {
                  content: none;
                }
                &:before {
                  height: 12px;
                  width: 1px;
                  background-color: #dce9f8;
                  left: 32px;
                  top: 0;
                }
              }
              .trackTime {
                color: #4b64c4;
                float: left;
                margin-right: 16px;
                display: block;
              }
              i {
                width: 15px;
                height: 15px;
                float: left;
                background: url("../../assets/img/strategy/celue_icon1.png");
                margin: 4px 14px 0 0;
                display: block;
                z-index: 11;
                position: relative;
              }
              .newsI {
                background: url("../../assets/img/strategy/celue_icon.png");
              }
              .trackTimenews {
                color: #ff435e;
              }
              .trackFont {
                font-size: 14px;
                color: #454545;
                float: left;
                width: 410px;
                position: relative;
                display: block;
              }
              .tracknews {
                color: #ff435e;
                &:after {
                  position: absolute;
                  content: '';
                  width: 30px;
                  height: 18px;
                  background: url("../../assets/img/strategy/newgif.gif");
                  transform: translate(4px,2px);
                }
              }
              .tracknewsFont {
                color: #ff435e;
              }
              .noseetrack {
                &:after {
                  position: absolute;
                  content: '';
                  width: 11px;
                  height: 13px;
                  background: url("../../assets/img/strategy/greylogin_icon.png");
                  transform: translateY(5px);
                }
              }
            }
          }
        }
      }
    }
  }
  .top193 {
    top: 174px;
  }
  .top204 {
    top: 203px;
  }
  .top251 {
    top: 232px;
  }
}
.font12 {
  font-size: 12px!important;
}
.noticeStrategy {
  position: absolute;
  bottom: 139px;
  width: 100%;
  height: 28px;
  background-color: #d7ecff;
  &.pointers {
    cursor: pointer;
  }
  &:before {
    position: absolute;
    width: 116px;
    height: 27px;
    background: url("../../assets/img/strategy/celue_img.png");
    left: 0;
    top: 0;
    content: '';
  }
  .noticeStrategyBox {
    margin-left: 138px;
    width: 480px;
    overflow: hidden;
    p {
      display: inline-block;
      line-height: 28px;
      width: 100%;
      transform: translateX(100%);
      span {
        color: #2f7cca;
      }
      &.animaLeft {
        animation: gotoLeft 5s linear forwards;
      }
    }
    @keyframes gotoLeft {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(0%);
      }
    }
  }
}

/*止盈*/
.surplusColor {
  background: #d9113f!important;
}
/*止损*/
.lossColor {
  background: #059f10!important;
}
/*平保*/
.insurance {
  background: #db9603!important;
}
/*取消*/
.cancelColor {
  background: #2248b3!important;
}
/*未开仓*/
.notOpenColor {
  color: #1968b1!important;
}
/*已平仓*/
.liquidatedColor {
  color: #eeae37!important;
}
/*未平仓*/
.NoliquidatedColor {
  color: #d73e20!important;
}
/*持仓中或者做多*/
.doMoreColor {
  color: #059f10!important;
}
/*做空*/
.shortColor {
  color: #f71b4e!important;
}

.face-panel {
  overflow: hidden;
  li {
    float: left;
    padding: 5px;
  }
  img {
    display: block;
    width: 22px;
    height: 22px;
  }
}

body .layui-util-face .layui-layer-content {
  padding: 0;
  background-color: #fff;
  color: #666;
  box-shadow: none
}

img {
  max-height: 100%;
  max-width: 100%;
}

.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.header {
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 200;
  height: $headerHeight;
  .logo {
    display: block;
    float: left;
    vertical-align: middle;
    margin-left: 10px;
    margin-top: 14px;
  }
  .nav-view-lefts {
    display: none;
    float: left;
    position: relative;
    margin-left: 30px;
    .nav-view-left-text {
      line-height: 65px;
      cursor: pointer;
      color: #fff;
      font-size: 14px;
      i.i-img-icon {
        width: 14px;
        height: 13px;
        display: inline-block;
        margin-right: 5px;
        background: url("../../../static/img/fuwu.png");
        transform: translateY(2px);
      }
    }
    &:hover {
      .nav-list {
        display: block;
      }
    }
    .nav-list {
      left: -12px;
      position: absolute;
      top: 65px;
      width: 120px;
      background-color: #ffffff;
      z-index: 100;
      display: none;
      padding: 0 12px;
      border-radius: 0 0 5px 5px;
      li {
        height: 40px;
        a {
          line-height: 40px;
          display: block;
          font-size: 14px;
          color: #666;
          text-align: center;
          border-bottom: dashed 1px #e8e8e8;
          transition: .5s all;
          -webkit-transition: .5s all;
        }
        &:hover {
          a {
            color: #4b64c4;
          }
        }
        &:last-child {
          a {
            border-bottom: none;
          }
        }
      }
    }
  }
  .nav-view-left {
    float: left;
    position: relative;
    margin-left: 30px;
    .nav-view-left-text {
      line-height: 65px;
      cursor: pointer;
      color: #fff;
      font-size: 14px;
      i.i-img-icon {
        width: 14px;
        height: 12px;
        display: inline-block;
        margin-right: 5px;
        background: url("../../../static/img/nav_icon.png");
      }
    }
    &:hover {
      .nav-list {
        display: block;
      }
    }
    .nav-list {
      position: absolute;
      top: 65px;
      width: 120px;
      background-color: #ffffff;
      z-index: 100;
      display: none;
      padding: 0 12px;
      left: -20px;
      border-radius: 0 0 5px 5px;
      li {
        height: 40px;
        a {
          line-height: 40px;
          display: block;
          font-size: 14px;
          color: #666;
          text-align: center;
          border-bottom: dashed 1px #e8e8e8;
          transition: .5s all;
          -webkit-transition: .5s all;
        }
        &:hover {
          a {
            color: #4b64c4;
          }
        }
        &:last-child {
          a {
            border-bottom: none;
          }
        }
      }
    }
  }
  .tabLiveTitle {
    float: left;
    position: relative;
    margin-left: 30px;
    .tabLiveTitle-text {
      line-height: 65px;
      cursor: pointer;
      color: #fff;
      font-size: 14px;
      i.i-img-icon {
        width: 16px;
        height: 16px;
        display: inline-block;
        margin-right: 6px;
        background: url("../../../static/img/qiehuan_icon.png");
        transform: translateY(3px);
      }
      i.i-img-san {
        width: 10px;
        height: 5px;
        display: inline-block;
        margin-left: 6px;
        background: url("../../../static/img/sanjiaoxing.png");
        transition: all .2s linear;
        transform: translateY(-2px);
      }
    }
    &:hover {
      .nav-list {
        display: block;
      }
      i.i-img-san {
        transform: rotate(180deg) translateY(2px);
      }
    }
    .nav-list {
      position: absolute;
      top: 65px;
      width: 386px;
      background-color: #ffffff;
      z-index: 100;
      display: none;
      left: 0px;
      box-shadow: 0px 2px 8px 0px rgba(203, 203, 203, 0.5);
      border-radius: 0px 0px 5px 5px;
      border: solid 1px #e9e9e9;
      padding: 16px 0;
      li {
        height: 12px;
        float: left;
        border-right: solid 1px #e0e0e0;
        width: 128px;
        a {
          line-height: 12px;
          display: block;
          font-size: 14px;
          color: #333;
          text-align: center;
          transition: .2s all;
          -webkit-transition: .2s all;
        }
        &:hover {
          a {
            color: #eeae37;
          }
        }
        &:last-child {
          border-right: none;
        }
      }
    }
  }
  .warp {
    padding-left: 10px;
    margin: 0 auto;
    height: $headerHeight;
  }
  .user {
    float: right;
    display: block;
    .z-contact {
      display: inline-block;
      width: 90px;
      background-color: #4b64c4;
      line-height: 65px;
      color: #fff;
      text-align: center;
      font-size: 14px;
    }
    .user-nav-list {
      display: inline-block;
      li {
        display: inline-block;
        position: relative;
        margin-right: 55px;
        a {
          display: block;
          text-align: center;
          color: #98a1c2;
          font-size: 14px;
        }
        &:hover {
          a {
            font-weight: bold;
            color: #b3c3ff;
          }
        }
      }
    }
    .user-info {
      display: inline-block;
      a {
        display: inline-block;
        margin-right: 20px;
        line-height: 65px;
        color: #a9bae1;
        font-size: 12px;
      }
    }
    .user-info-sign {
      display: inline-block;
      margin-left: 32px;
      a {
        display: inline-block;
        margin-right: 20px;
        line-height: 65px;
        color: #fff;
        font-size: 14px;
        &:hover {
          color: rgba(255,255,255,0.5)
        }
      }
      .sign-in {
        &:before {
          content: '';
          display: inline-block;
          margin-right: 10px;
          width: 12px;
          height: 12px;
          background: url("../../../static/img/user_icon.png") no-repeat;
          transform: translateY(1px);
        }
        position: relative;
        &:after {
          content: '';
          position: absolute;
          width: 1px;
          height: 11px;
          background: #9e809c;
          top: 27px;
          left: 62px;
        }
      }
    }
  }
}

.user-info {
  margin-left: 30px;
  img {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    vertical-align: top;
    margin-top: 13px;
    border: 1px solid #fff;
  }
  .cardStyle {
    width: 70px;
    height: 20px;
    display: inline-block;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    margin-right: 20px;
    position: relative;
    &:after {
      position: absolute;
      content: '';
      width: 1px;
      height: 11px;
      box-shadow: 1px 0px 0px 0px rgba(217, 217, 218, 0.1);
      background: #323e51;
      top: 4px;
      right: -15px;
    }
  }
  //白金
  .yearCard {
    background-image: linear-gradient(90deg, #ddebee 0%, #9da8b8 100%);
    border: solid 1px #a0acbb;
    color: #3b4045;
  }
  .userPint {
    margin-right: 12px!important;
  }
  //黄金
  .moneyCard {
    background-image: linear-gradient(90deg, #fae1c0 0%, #e0b168 100%);
    border: solid 1px #ddb16a;
    color: #875e28;
  }
  /*钻石*/
 .zuanshiCard {
    background-image: linear-gradient(90deg, #404040 0%, #2d2c2c 100%);
    border: solid 1px #363838;
    color: #d5ba78;
  }
  //体验卡
  .tyCard {
    background-image: linear-gradient(90deg, #f3d2c2 0%, #e49875 100%);
    border: solid 1px #eaaf94;
    color: #89492b;
  }
  //普通会员
  .ptCard {
    background-image: linear-gradient(90deg, #edf1f5 0%, #c8c8d1 100%);
    border: solid 1px #bbbcc3;
    color: #636378;
  }
  .time {
    font-size: 12px;
    color: #77829d;
    display: inline-block;
    margin-right: 22px;
    position: relative;
    &:after {
      position: absolute;
      content: '';
      width: 1px;
      height: 11px;
      box-shadow: 1px 0px 0px 0px rgba(217, 217, 218, 0.1);
      background: #323e51;
      top: 4px;
      right: -14px;
    }
  }
  > p {
    display: inline-block;
    line-height: 36px;
    padding: 0 10px;
  }
}

.chat-banner {
  img {
    display: block;
    width: $chatRoomWidth;
    height: 130px;
  }
}

.ivu-collapse {
  padding: 0 26px;
}

.ivu-collapse > .ivu-collapse-item > .ivu-collapse-header > i {
  transition: transform .2s ease-in-out;
}

.ivu-collapse > .ivu-collapse-item.ivu-collapse-item-active > .ivu-collapse-header > i {
  transform: rotate(90deg);
}

.ivu-collapse-header {
  font-size: 18px;
  color: #A88B5C;
  cursor: pointer;
}

.ivu-collapse-item {
  margin-top: 15px;
}

.users {
  line-height: 22px;
  padding: 0 4px;
  li {
    position: relative;
    border-bottom: 1px solid transparent;
    padding: 8px 0 8px 8px;
    .avatar-img {
      display: inline-block;
      width: 40px;
      height: 40px;
      background-color: #ffffff;
      border: solid 1px #fff;
      border-radius: 90px;
      vertical-align: middle;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .img-pos-view {
        position: absolute;
        top: -10px;
        left: 43px;
        width: 69px;
        background-color: #ffffff;
        box-shadow: 0px 1px 4px 0px rgba(179, 181, 185, 0.76);
        border-radius: 3px;
        z-index: 100;
        padding: 3px;
        em {
          line-height: 25px;
          display: block;
          text-align: center;
          font-size: 12px;
          margin-left: 4px;
          cursor: pointer;
          color: #666666;
          &:first-child {
            border-bottom: solid 1px #e2e2e2;
          }
        }
      }
    }
    &:last-child {
      border: none;
    }
  }
  p {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    color: #c5d1f8;
  }
  .red {
    background-color: #de3c54;
    background-image: linear-gradient(39deg, #EF4F5D 0%, #DE3C54 100%);
  }
  .blue {
    background-color: #74c8f9;
  }
  .brown {
    background-color: #a88b5c;
  }
}

.normal-users {
  li {
    &:hover {
      .img-pos-view {
        display: block;
      }
    }
    .img-pos-view {
      display: none;
    }
    .y-gossip-icon {
      display: inline-block;
      width: 55px;
      margin-left: 10px;
      height: 22px;
      background-color: #eeae37;
      border-radius: 3px;
      text-align: center;
      font-size: 12px;
      color: #ffffff;
      line-height: 22px;
    }
  }
}

.pubRedDialog {
  left: auto;
  width: 216px;
  border-radius: 18px;
  right: 0;
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__headerbtn {
    position: absolute;
    right: 12px;
    top: 6px;
    .el-dialog__close {
      font-size: 10px;
      color: #fff;
    }
  }
}

.redDialog {
  background-color: #C51933;
  background-image: linear-gradient(39deg, #FA5766 0%, #C51933 100%);
  h2 {
    line-height: 1;
    text-align: center;
    color: #FFCA58;
    font-size: 20px;
  }
}

.red-layer {
  position: absolute;
  width: 50px;
  font-size: 12px;
  text-align: center;
  color: #FF6A6F;
  line-height: 1.2;
  right: 18px;
  top: 30%;
  cursor: pointer;
  z-index: 20;
}

.reden-input {
  height: 28px;
  line-height: 28px;
  background-color: #ffffff;
  margin-top: 12px;
  padding: 0 6px;
  input {
    float: left;
    border: none;
    width: 134px;
    height: 28px;
  }
  p {
    float: right;
    text-align: right;
  }
}

.reden-radio {
  color: #ffffff;
  margin: 18px 0;
  height: 14px;
  > div {
    float: left;
    line-height: 14px;
  }
  input {
    display: inline-block;
    vertical-align: top;
  }
  label {
    font-size: 12px;
    height: 14px;
    display: inline-block;
    vertical-align: top;
  }
}

.reden-btn {
  background-color: #ecb964;
  background-image: linear-gradient(41deg, #E6CA8F 0%, #ECB964 86%);
  border-radius: 32px;
  display: block;
  width: 100%;
  height: 32px;
  color: #ffffff;
  border: none;
  cursor: pointer;
}

.grabDialog {
  background: url("../img/red-bg1.png") center top no-repeat #FFF7F7;
  border-radius: 33px;
  text-align: center;
  .el-dialog__body {
    padding-bottom: 10px;
  }
  .blue {
    font-size: 12px;
    color: #74C8F9;
  }
}

.grab-header {
  font-weight: bold;
  line-height: 1;
  height: 66px;
  margin-bottom: 8px;
  h2 {
    color: #FFCA58;
    font-size: 20px;
  }
  p {
    color: #ffffff;
    font-size: 20px;
    margin-top: 10px;
  }
  span {
    font-size: 14px;
  }
}

.face-panel {
  border: 1px solid #D9D9D9;
  li {
    cursor: pointer;
    float: left;
    border: 1px solid #e8e8e8;
    height: 32px;
    width: 32px;
    overflow: hidden;
    margin: -1px 0 0 -1px;
    padding: 4px;
    text-align: center;
    &:hover {
      position: relative;
      z-index: 2;
      border-color: #eb7350;
      background: #fff9ec;
    }
  }
}

$private-chat-width: 666px;
$private-chat-tab-width: 127px;
$private-chat-box-width: $private-chat-width - $private-chat-tab-width;
.private-chat {
  width: $private-chat-width;
  border-radius: 18px;
  overflow: hidden;
  .el-dialog__body {
    padding: 0;
    overflow: hidden;
  }
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__headerbtn {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 2;
  }
}

.pc-tab {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: $private-chat-tab-width;
  padding-top: 25px;
  background-color: #4298c9;
  background-image: linear-gradient(41deg, #84C0E9 0%, #4298C9 86%);
  line-height: 45px;
  text-align: center;
  overflow-y: auto;
  color: #ffffff;
  li {
    cursor: pointer;
    position: relative;
    &:hover {
      i {
        display: block;
      }
    }
  }
  .active {
    background: #74C8F9;
    em {
      display: none;
    }
  }
  .el-icon-close {
    position: absolute;
    font-size: 10px;
    left: 12px;
    top: 17px;
    display: none;
  }
  em {
    color: #ffffff;
    background: #E86A6A;
    height: 14px;
    line-height: 14px;
    text-align: center;
    min-width: 14px;
    border-radius: 7px;
    font-size: 12px;
    position: absolute;
    right: 6px;
    top: 15px;
  }
}

.pc-box {
  margin-left: $private-chat-tab-width;
  width: $private-chat-box-width;
}

.pc-header {
  line-height: 60px;
  background: #D0EEFF;
  color: #3B6DD2;
  padding-left: 70px;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    width: 36px;
    height: 17px;
    left: 26px;
    top: 22px;
  }
}

.pc-content {
  height: 366px;
  padding: 10px 25px;
  overflow: auto;
}

.pc-tool {
  height: 44px;
  border-top: 1px solid #dcdcdc;
  a {
    float: left;
    margin-left: 8px;
  }
}

.pc-bottom {
  padding: 0 10px 10px;
  textarea {
    display: block;
    height: 76px;
    width: 100%;
    border: none;
    outline: none;
  }
}

.pc-btns {
  margin-top: 10px;
  height: 32px;
  p {
    float: left;
    line-height: 32px;
    color: #999999;
    font-size: 12px;
  }
  button {
    float: right;
    height: 32px;
    margin-left: 8px;
    padding: 0 26px;
    background-color: #C6AA7B;
    color: #fff;
    border-radius: 3px;
    border: none;
  }
}

.dialogue-gift {
  color: #BD8B1F;
  img {
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: bottom;
  }
}

li.giftItem {
  &:before {
    top: auto;
    bottom: 4px;
  }
}

//.siliao {
//  position: relative;
//  &:after {
//    content: '';
//    position: absolute;
//    width: 8px;
//    height: 8px;
//    background-color: #E86A6A;
//    border-radius: 50%;
//    right: 26px;
//    top: 14px;
//  }
//}

.imgListLayer {
  width: 684px;
  ul {
    text-align: center;
    overflow: auto;
    margin-left: -10px;
    max-height: 340px;
  }
  li {
    float: left;
    margin-left: 10px;
    width: 117px;
    margin-bottom: 14px;
  }
  img {
    display: block;
    width: 117px;
    height: 74px;
    border-radius: 3px;
    margin-bottom: 6px;
  }
  .active {
    border: 4px solid #E86A6A;
  }
}

.el-message {
  top: 40%;
}

.cur-zoom {
  cursor: zoom-in;
}

.gift-tip {
  img {
    float: left;
    width: 50px;
    height: 50px;
  }
}

.gift-info {
  float: left;
  border-left: 1px solid #ddd;
  padding-left: 8px;
  margin-left: 8px;
  h4 {
    font-size: 14px;
  }
  p {
    width: 132px;
    margin-bottom: 4px;
  }
  button {
    background-color: #C6AA7B;
    background: linear-gradient(41deg, #DDC89C 0%, #C6AA7B 86%);
    color: #ffffff;
    width: 60px;
    border-radius: 3px;
  }
}

.banner-enter-active, .banner-leave-active {
  transition: height .3s ease-in-out;
  height: 130px;
}

.banner-enter, .banner-leave-to {
  height: 0;
}

.hideBanner {
  .chat-cont {
    top: 80px;
  }
  .chat-head {
    z-index: 0;
  }
  .chat-announcement {
    top: 90px;
    &.on {
      top: 54px;
      height: 0;
      .chat-announcement-text {
        &:before {
          display: none;
        }
        p {
          opacity: 0;
        }
      }
    }
  }
  .chat-head-teacher-view {
    height: 40px;
  }
  .chat-arrow {
    top: -170px;
  }
}

//@media (min-width: 768px) {
//  .chat-room {
//    width: 580px;
//  }
//  .mainbody {
//    right: 595px;
//    .mainbody-con {
//      .live-box {
//        padding-top: 37.25%;
//      }
//      &.on {
//        .live-box {
//          padding-top: 56.25%;
//        }
//        .mainbody-view {
//          bottom: 135px;
//        }
//      }
//    }
//  }
//  .chat-form {
//    textarea {
//      width: 415px;
//    }
//  }
//}

//@media (min-width: 992px) {
//  .chat-room {
//    width: 580px;
//  }
//  .mainbody {
//    right: 595px;
//    .mainbody-con {
//      .live-box {
//        padding-top: 37.25%;
//      }
//      &.on {
//        .live-box {
//          padding-top: 56.25%;
//        }
//        .mainbody-view {
//          bottom: 135px;
//        }
//      }
//    }
//  }
//  .chat-form {
//    textarea {
//      width: 415px;
//    }
//  }
//}

//@media (min-width: 1366px) {
//  //.chat-room {
//  //  width: 580px;
//  //}
//  .mainbody {
//    //right: 595px;
//    .mainbody-con {
//      //.live-box {
//      //  padding-top: 56.25%;
//      //}
//      //&.on {
//      //  .live-box {
//      //    padding-top: 56.25%;
//      //  }
//        //.mainbody-view {
//        //  bottom: 135px;
//        //}
//      //}
//    }
//
//  }
//  //.chat-form {
//  //  textarea {
//  //    width: 415px;
//  //  }
//  //}
//}

@media (max-width: 1440px) {

  //.chat-room {
  //  width: 660px;
  //}
  .mainbody {
    //right: 675px;
    .mainbody-con {
      //.live-box {
      //  padding-top: 56.25%;
      //}
      //&.on {
      //  .live-box {
      //    padding-top: 56.25%;
      //  }
      //  //.mainbody-view {
      //  //  bottom: 135px;
      //  //}
      //}
      .live-box-btn {
        display: block;
      }
    }
  }
  //.chat-form {
  //  textarea {
  //    width: 490px;
  //  }
  //}
}
//@media (min-width: 1920px) {
//
//  //.chat-room {
//  //  width: 660px;
//  //}
//  .mainbody {
//    //right: 675px;
//    .mainbody-con {
//      .live-box {
//        padding-top: 50%;
//      }
//      &.on {
//        .live-box {
//          padding-top: 53%;
//        }
//        //.mainbody-view {
//        //  bottom: 135px;
//        //}
//      }
//    }
//  }
  //.chat-form {
  //  textarea {
  //    width: 490px;
  //  }
  //}
//}

@media (max-width: 1600px) {
  .user-nav-list {
    display: none!important;
  }
  .nav-view-lefts {
    display: block!important;
  }
}

@keyframes clfirst {
  0% {
    right: -195px;
  }
  100% {
    right: 100%;
  }
}

@-webkit-keyframes clfirst /* Safari and Chrome */
{
  0% {
    right: -195px;
  }
  100% {
    right: 100%;
  }
}
.channelLiveWX {
  width: 370px;
  background-color: #ffffff;
  border-radius: 6px;
  .el-dialog__header {
    padding: 10px 0 10px 20px;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid #e5e5e5;
    font-size: 16px;
    color: #333333;
    .el-dialog__headerbtn {
      top: 10px!important;
      right: 14px!important;
    }
  }
  .el-dialog__body {
    padding: 10px 0px 16px;
    text-align: center;
    .topInfo {
      color: #909090;
      font-size: 16px;
      i {
        width: 22px;
        height: 22px;
        display: inline-block;
        margin-right: 8px;
        -webkit-transform: translateY(4px);
        -moz-transform: translateY(4px);
        -ms-transform: translateY(4px);
        -o-transform: translateY(4px);
        transform: translateY(4px);
        background: url("../../../static/img/no_choose_icon1.png");
      }
    }
    img {
      width: 125px;
      height: 125px;
      margin: 6px 0 4px;
    }
    a {
      display: inline-block;
      width: 165px;
      height: 35px;
      border-radius: 3px;
      font-size: 14px;
      line-height: 35px;
      -webkit-transition: all .2s linear;
      -moz-transition: all .2s linear;
      -ms-transition: all .2s linear;
      -o-transition: all .2s linear;
      transition: all .2s linear;
      background-color: #1968b1;
      border: solid 1px #1968b1;
      margin-top: 4px;
      color: #fff;
      cursor: pointer;
      &:hover {
        background: #0e73d0;
        border: solid 1px #0e73d0;
      }
    }
  }
}
